<template>
    <div class="search-container">
        <div class="search">
            <!--在移动断调用虚拟键盘的时候 enter键变成 搜索按钮 -->
            <form action="#">
                <input type="search" placeholder="搜索你喜欢的商品" v-model="hisItem">
            </form>
            <router-link to="/searchInfo" @click.native="saveHis">搜索</router-link>
        </div>
        <div class="history">
            <div class="history-top">
                <span>搜索历史</span>
                <span class="clear"><i class="mui-icon mui-icon-trash"></i>删除历史</span>
            </div>
            <div class="history-list">
                <ul class="mui-table-view" v-for="item in hisArr">
                    <li class="mui-table-view-cell">{{item}}</li>

                </ul>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                hisItem:'',
                hisArr:[],
            }
        },
        created(){
          this.getHis()
        },
        methods:{
            saveHis(){
                //this.hisArr.push(this.hisItem);
                var arr = JSON.parse(localStorage.getItem('hisItem')||'[]');
                arr.push(this.hisItem);
                //this.hisArr = arr;
                localStorage.setItem('hisItem',JSON.stringify(arr));
                this.$store.commit('getId',this.hisItem);
            },
            getHis(){
                var arr = JSON.parse(localStorage.getItem('hisItem')||'[]');
                this.hisArr = arr;
            }
        }
    }
</script>

<style scoped lang="less">
    .search-container{
        width: 100%;

        .search{
            width: 100%;
            padding: 10px;
            position: relative;
            form {
                input {
                    width: 100%;
                    height: 30px;
                    border: 1px solid #006699;
                    line-height: 28px;
                    font-size: 12px;
                    margin-bottom: 0;
                }
            }
            a{
                width: 60px;
                height: 30px;
                background: #006699;
                color: #FFFFFF;
                display: block;
                text-align: center;
                line-height: 30px;
                position: absolute;
                top: 10px;
                right: 10px;
            }
        }
        .history{
            .history-top{
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
            }
            span{
                padding:0 10px;
                font-size: 12px;
            }
        }
    }
</style>